<template>
	<view class="neighbor_tab">
		<view class="tab_item" v-for="(item,index) in neighborTabList" :key="item.text" @click="clickTab(index)">
			<image :src="item.img" mode="" :class="index == 1? 'add_img':''" ></image>
			<text :class="currTabIndex == index? 'current_tab':''">{{item.text}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currTabIndex: 0,
				neighborTabList: [
					{img: '../static/images/neighborimg/z_home_s.png', text: '首页'},
					{img: '../static/images/neighborimg/z_fa.png', text: '发布'},
					{img: '../static/images/neighborimg/z_my_s.png', text: '我的'},
				]
			};
		},
		methods:{
			clickTab(index){
				this.currTabIndex = index
			}
		}
	}
</script>

<style lang="scss">
.neighbor_tab{
	padding-bottom: 10rpx;
	display: flex;
	position: fixed;
	justify-content: space-around;
	bottom: 0;
	width: 100%;
	height: 110rpx;
	background-color: #fff;
	border-top: 1rpx solid #f4f4f4;
	.tab_item{
		flex: 1;
		display: flex;
		flex-direction: column;
		text-align: center;
		image{
			display: block;
			margin: auto;
			width: 44rpx;
			height: 44rpx;
		}
		.add_img {
			margin-top: -38rpx;
			width: 146rpx;
			height: 90rpx;
		}
		.current_tab{
			color: #ff7430;
		}
	}
}
</style>
